<template>
  <div class="app">
    <h2>Name: {{ person2.name }}</h2>
    <h2>Age: {{ person2.age }}</h2>
    <button @click="changeAge">change age</button>
    <hr>
    <h2>Car brand: {{ car2.brand }}</h2>
    <h2>Car price: {{ car2.price }}</h2>
    <button @click="changePrice">change price</button>
  </div>
</template>

<script setup lang="ts" name="App">
  import { reactive, toRaw, markRaw } from 'vue';

  let person = reactive({
    name: 'aphasia',
    age: 19
  })

  let person2 = toRaw(person)
  function changeAge() {
    person2.age += 1
  }

  console.log(person);
  console.log(person2);
  
  // markRow
  let car = markRaw({
    brand: 'Benz',
    price: 100
  })
  let car2 = reactive(car)
  console.log(car);
  console.log(car2);
  
  function changePrice() {
    car2.price += 1
  }
</script>

<style scoped>
  .app {
    background-color: #ddd;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px
  }
  button {
    margin: 5px;
  }
</style>